import { mount } from '@vue/test-utils'
import Login from '@/components/Login.vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

// Mock `ElMessage` for testing
jest.mock('element-plus', () => ({
  ElMessage: {
    success: jest.fn(),
    error: jest.fn(),
  },
}));

// Mocking `useUserStore` login action
jest.mock('@/stores/user', () => ({
  useUserStore: () => ({
    login: jest.fn(),
  }),
}));

describe('Login.vue', () => {
  let wrapper;
  let userStore;

  beforeEach(() => {
    userStore = useUserStore();
    wrapper = mount(Login, {
      global: {
        plugins: [ElMessage], // Mock plugins for ElementPlus
      },
    });
  });

  it('should render the login form correctly', () => {
    const usernameInput = wrapper.find('input[placeholder="请输入用户名"]');
    const passwordInput = wrapper.find('input[placeholder="请输入密码"]');
    const loginButton = wrapper.find('button.el-button');

    expect(usernameInput.exists()).toBe(true);
    expect(passwordInput.exists()).toBe(true);
    expect(loginButton.exists()).toBe(true);
  });

  it('should show an error message when credentials are missing', async () => {
    const loginButton = wrapper.find('button.el-button');
    await loginButton.trigger('click'); // Simulate click

    // Expect ElMessage.error to be called with the error message
    expect(ElMessage.error).toHaveBeenCalledWith('用户名和密码不能为空');
  });

  it('should show an error message when invalid credentials are entered', async () => {
    // Simulate entering invalid username and password
    const usernameInput = wrapper.find('input[placeholder="请输入用户名"]');
    const passwordInput = wrapper.find('input[placeholder="请输入密码"]');
    await usernameInput.setValue('wronguser');
    await passwordInput.setValue('wrongpass');

    const loginButton = wrapper.find('button.el-button');
    await loginButton.trigger('click');

    // Expect login function to be called, but it will throw an error for invalid credentials
    expect(userStore.login).toHaveBeenCalledWith({ username: 'wronguser', password: 'wrongpass' });
    expect(ElMessage.error).toHaveBeenCalledWith('登录失败');
  });

  it('should successfully log in when valid credentials are entered', async () => {
    // Simulate entering correct username and password
    const usernameInput = wrapper.find('input[placeholder="请输入用户名"]');
    const passwordInput = wrapper.find('input[placeholder="请输入密码"]');
    await usernameInput.setValue('testuser');
    await passwordInput.setValue('password123');

    const loginButton = wrapper.find('button.el-button');
    await loginButton.trigger('click');

    // Mock login action success
    userStore.login.mockResolvedValueOnce();

    // Expect login to succeed and success message to be shown
    expect(userStore.login).toHaveBeenCalledWith({ username: 'testuser', password: 'password123' });
    expect(ElMessage.success).toHaveBeenCalledWith('登录成功');
  });

  it('should clear the password field on login failure', async () => {
    // Simulate entering correct username and password
    const usernameInput = wrapper.find('input[placeholder="请输入用户名"]');
    const passwordInput = wrapper.find('input[placeholder="请输入密码"]');
    await usernameInput.setValue('testuser');
    await passwordInput.setValue('password123');

    const loginButton = wrapper.find('button.el-button');
    await loginButton.trigger('click');

    // Mock login action failure
    userStore.login.mockRejectedValueOnce(new Error('登录失败'));

    // Expect login failure, error message and password clearing
    expect(userStore.login).toHaveBeenCalledWith({ username: 'testuser', password: 'password123' });
    expect(ElMessage.error).toHaveBeenCalledWith('登录失败');
    expect(passwordInput.element.value).toBe(''); // Check if the password field is cleared
  });
});
